package com.example.composableexample.grid

import android.content.res.Configuration.ORIENTATION_LANDSCAPE
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.staggeredgrid.LazyHorizontalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.foundation.lazy.staggeredgrid.items
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

class GridItem(val id: String, val color: Color, val size: Dp)

@Composable
fun Item(modifier: Modifier = Modifier, item: GridItem) {

    Box(
        modifier = modifier
            .background(item.color)
            .width(item.size)
    )
}

@OptIn(ExperimentalFoundationApi::class)
@Preview
@Composable
fun LazyStaggeredGridPreview() {

    val items = listOf(
        GridItem(id = "1", color = Color(0xFFF44336), size = 300.dp),
        GridItem(id = "2", color = Color(0xFF9C27B0), size = 400.dp),
        GridItem(id = "3", color = Color(0xFF3F51B5), size = 250.dp),
        GridItem(id = "4", color = Color(0xFF2196F3), size = 345.dp),
        GridItem(id = "5", color = Color(0xFF03A9F4), size = 300.dp),
        GridItem(id = "6", color = Color(0xFF00BCD4), size = 432.dp),
        GridItem(id = "7", color = Color(0xFF009688), size = 234.dp),
        GridItem(id = "8", color = Color(0xFF4CAF50), size = 123.dp),
        GridItem(id = "9", color = Color(0xFF8BC34A), size = 321.dp),
        GridItem(id = "10", color = Color(0xFFCDDC39), size = 231.dp),
        GridItem(id = "11", color = Color(0xFFFFEB3B), size = 324.dp),
        GridItem(id = "12", color = Color(0xFFFF9800), size = 533.dp),
        GridItem(id = "13", color = Color(0xFFFF5722), size = 343.dp),
        GridItem(id = "14", color = Color(0xFFC6FF00), size = 555.dp),
        GridItem(id = "15", color = Color(0xFFF44336), size = 222.dp),
        GridItem(id = "16", color = Color(0xFF2979FF), size = 333.dp),
        GridItem(id = "17", color = Color(0xFF00E5FF), size = 300.dp),
    )

    val cellConfiguration = if (LocalConfiguration.current.orientation == ORIENTATION_LANDSCAPE) {
        StaggeredGridCells.Adaptive(minSize = 175.dp)
    } else {
        StaggeredGridCells.Fixed(2)
    }

//    LazyVerticalStaggeredGrid(
//        columns = cellConfiguration,
//        contentPadding = PaddingValues(16.dp),
//        verticalArrangement = Arrangement.spacedBy(16.dp),
//        horizontalArrangement = Arrangement.spacedBy(16.dp)
//    ) {
//        items(items) {
//            Item(item = it)
//        }
//    }

    LazyHorizontalStaggeredGrid(
        rows = cellConfiguration,
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(items, key = { it.id }) {
            Item(item = it)
        }
    }
}